<template>
    <div style="display: flex">
        <div style="width: 35%; margin-left: 2%">
            <v-checkbox
                label="相对值"
                hide-details
                v-model="design.template[command].relative"
            ></v-checkbox>
        </div>
        <v-tooltip location="top">
            <template v-slot:activator="{ props }">
                <v-icon
                    style="margin: 14px 5px 0 -5px"
                    icon="mdi-help-circle-outline"
                    v-bind="props"
                ></v-icon> </template
            >勾选时，相对于当前位置进行变化<br />未勾选时，变化到指定位置
        </v-tooltip>
    </div>
    <div
        v-for="(value, key) in attrDict"
        style="
            margin: 0 5% 5% 5%;
            display: flex;
            justify-content: space-between;
        "
    >
        <h4 style="justify-content: flex-start">{{ key }}</h4>
        <div style="justify-content: flex-end">
            <input
                class="input"
                style="text-align: center; width: 50px"
                @change="
                    (e) => {
                        design.template[command][value[0]] = e.target.value
                    }
                "
            />{{ value[1] }}
        </div>
    </div>
    <v-divider style="margin: 20px 0 20px 0"></v-divider>
    <div
        style="
            margin: 5% 5% 0 5%;
            display: flex;
            justify-content: space-between;
        "
    >
        <h4 style="justify-content: flex-start">缓动</h4>
        <div style="justify-content: flex-end">
            <select
                class="select"
                @change="
                    (e) => {
                        design.template[command].slowMotion = e.target.value
                    }
                "
            >
                <option value="none">无</option>
                <option
                    value="linear"
                    selected
                >
                    线性
                </option>
                <option value="accelerate">加速</option>
                <option value="decelerate">减速</option>
            </select>
        </div>
    </div>
    <div
        style="
            margin: 5% 5% 0 5%;
            display: flex;
            justify-content: space-between;
        "
        :style="{
            opacity: design.template[command].slowMotion === 'none' ? '0.6' : '1'
        }"
    >
        <h4 style="justify-content: flex-start">时长</h4>
        <div style="justify-content: flex-end">
            <input
                class="input"
                style="text-align: center; width: 50px"
                :disabled="design.template[command].slowMotion === 'none'"
                @change="
                    (e) => {
                        design.template[command].duration = e.target.value
                    }
                "
            />ms
        </div>
    </div>
    <div
        style="
            margin: 5% 5% 0 5%;
            display: flex;
            justify-content: space-between;
        "
    >
        <h4 style="justify-content: flex-start">延时</h4>
        <div style="justify-content: flex-end">
            <input
                class="input"
                style="text-align: center; width: 50px"
                @change="
                    (e) => {
                        design.template[command].delay = e.target.value
                    }
                "
            />ms
        </div>
    </div>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
export default {
    props: {
        attrDict: Object,
        funcName: String
    },
    data() {
        return {
            design: useDesignStore()
        }
    },
    computed: {
        command() {
            return this.design.interActive.interActiveCommand.toLowerCase()
        }
    }
}
</script>
